import React, { useEffect } from "react";
import { useStoreState } from "react-flow-renderer";
import { useParams } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { Dispatch, RootState } from "@/store";
import style from "./index.module.less";
 

const Sider = () => {
  const { type } = useParams<{ type: string }>();

  const dispatch = useDispatch<Dispatch>();
  const { allowedNodes } = useSelector((state: RootState) => state.diagram);
  // 可用节点
  useEffect(() => {
    dispatch.diagram.initSider(type);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  //获得画布上的节点
  const nodes = useStoreState((store) => store.nodes);
  //获得画布上的连线
  const edges=useStoreState((store)=>store.edges);

  const onDragStart = (evt: any, nodeType: string) => {
    // 记录被拖拽的节点类型
    evt.dataTransfer.setData("application/reactflow", nodeType);
    evt.dataTransfer.effectAllowed = "move";
  };
  return (
    <div className={style.sideContainer}>
      
      <div className={style.nodes}>
        {allowedNodes?.map((x, i) => (
          <div
            className={style.sideItem}
            key={`${x.type}-${i}`}
            onDragStart={(e) => onDragStart(e, x.type)}
            draggable
          >
            {x.name}
          </div>
        ))}
      </div>
      <div >节点数量：{nodes?.length ||'-'}</div>
      <div>连线数量：{edges?.length ||'-'}</div>
      
    </div>
  );
};
export default Sider;
